<template>
  <div class="Roles-container">
    <div class="search">
      <div class="search2"><el-input v-model="searchdriver" placeholder="请输入司机手机号" /></div>
      <div><el-button type="primary" @click="searchDriver">搜索</el-button></div>
      <div class="searchReturn"><el-button type="warning" @click="homePage">返回全部</el-button></div>
    </div>
    <!-- 卡片区域 -->
    <el-card>
      <!-- 司机列表区域 -->
      <!-- stripe 隔行变色 -->
      <el-table :data="driverList" border stripe @selection-change="handleSelectionChange">
        <!-- 第一列 -->
        <el-table-column type="selection" width="55" />
        <!-- 第一列  索引列-->
        <el-table-column type="index" />
        <!-- 第二列 -->
        <el-table-column prop="phoneNumber" label="手机号" />
        <!-- 第三列 -->
        <el-table-column prop="driverName" label="司机姓名" width="100" />
        <!-- 第四列 -->
        <el-table-column prop="driverSex" label="姓别" width="50" />
        <!-- 第五列 -->
        <el-table-column prop="serviceType" label="服务类型" width="70" />
        <!-- 第六列 -->
        <el-table-column prop="driverMailbox" label="邮箱" />
        <!-- 第七列 -->
        <el-table-column prop="creationTime" label="注册日期" />
        <!-- 第八列 -->
        <el-table-column label="操作" width="430">
          <!-- 作用域 插槽 -->
          <template slot-scope="scope">
            <!--
              通过Scoped slot可以获取到 row, column,
              scope又并非是整个table，我们只是能通过scope.row获得当前的行数据，
            -->
            <el-tag v-if="scope.row.auditState == '12'|| scope.row.auditState == '36'" type="danger" style="margin-right:12px">审核不通过</el-tag>
            <el-button v-if="scope.row.auditState == '13'" size="mini" type="warning" icon="el-icon-setting" @click="ToAudit(scope.row)">待审核</el-button>
            <el-button v-if="scope.row.auditState == '11'" size="mini" type="primary" icon="el-icon-edit" @click="showRedact(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" icon="el-icon-delete" @click="removedriver(scope.row.driverId)">删除</el-button>
            <el-button v-if="scope.row.auditState == '11' && scope.row.backgroundState==3" size="mini" type="success" icon="el-icon-s-release" @click="lockDriver(scope.row.driverId,'4')">锁定</el-button>
            <el-button v-if="scope.row.auditState == '11' && scope.row.backgroundState==4" size="mini" type="info" icon="el-icon-key" @click="lockDriver(scope.row.driverId,'3')">解锁</el-button>
            <el-button v-if="scope.row.auditState == '11'" size="mini" type="warning" icon="el-icon-s-grid" @click="orderForm(scope.row.driverId)">订单</el-button>
            <el-button v-if="scope.row.auditState == '11'" size="mini" type="info" icon="el-icon-s-order" @click="checkDriver(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <div class="removes">
        <el-pagination
          :current-page="querInfo.pagenum"
          :page-sizes="[3, 6, 9]"
          :page-size="querInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
        <div style="margin-right:18px"><el-button size="mini" type="danger" icon="el-icon-delete" @click="removes()">批量删除</el-button></div>
      </div>
    </el-card>
    <!-- 审核抽屉 -->
    <el-drawer
      title="司机注册信息"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
      size="1000px"
    >
      <div class="register_frame">
        <el-form :label-position="labelPosition" label-width="90px" :model="editList">
          <el-form-item label="手机号">
            <span>{{ auditInto.phoneNumber }}</span>
          </el-form-item>
          <el-form-item label="密码">
            <span>{{ auditInto.driverPwd }}</span>
          </el-form-item>
          <el-form-item label="姓名">
            <span>{{ auditInto.driverName }}</span>
          </el-form-item>
          <el-form-item label="性别">
            <span>{{ auditInto.driverSex }}</span>
          </el-form-item>
          <el-form-item label="身份证号">
            <span>{{ auditInto.driverCard }}</span>
          </el-form-item>
          <el-form-item label="邮箱">
            <span>{{ auditInto.driverMailbox }}</span>
          </el-form-item>
          <el-form-item label="行驶证号">
            <span>{{ auditInto.drivinglicenseNum }}</span>
          </el-form-item>
          <el-form-item label="驾驶证号">
            <span>{{ auditInto.drivingNum }}</span>
          </el-form-item>
          <el-form-item label="车辆颜色">
            <span>{{ auditInto.Colour }}</span>
          </el-form-item>
          <el-form-item label="品牌">
            <span>{{ auditInto.brand }}</span>
          </el-form-item>
          <el-form-item label="负荷人数">
            <span>{{ auditInto.loadNum }}</span>
          </el-form-item>
          <el-form-item label="车牌号">
            <span>{{ auditInto.plateNumber }}</span>
          </el-form-item>
          <el-form-item label="服务类型">
            <span>{{ auditInto.serviceType }}</span>
          </el-form-item>
          <el-form-item label="身份证图片">
            <el-image
              style="width: 192px; height: 108px"
              :src="auditInto.cardImg"
              :preview-src-list="idsrcList"
            />
          </el-form-item>
          <el-form-item label="行驶证图片">
            <el-image
              style="width: 192px; height: 108px"
              :src="auditInto.drivinglicenseImg"
              :preview-src-list="drivingLicenceSrcList"
            />
          </el-form-item>
          <el-form-item label="驾驶证图片">
            <el-image
              style="width: 192px; height: 108px"
              :src="auditInto.drivingImg"
              :preview-src-list="drivingSrcList"
            />
          </el-form-item>
          <div class="auditBtn">
            <div><el-button size="medium" type="primary" icon="el-icon-success" @click="Pass(auditInto.phoneNumber,11,'')">通过</el-button></div>
            <el-popover
              v-model="visible"
              placement="right"
              width="200"
            >
              <el-input v-model="input" placeholder="备注请勿超出10个字" />
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                <el-button type="primary" size="mini" @click="Pass(auditInto.phoneNumber,12,input)">确定</el-button>
              </div>
              <el-button slot="reference" size="medium" type="danger" icon="el-icon-error">不通过</el-button>
            </el-popover>
          </div>
        </el-form>
      </div>
    </el-drawer>
    <!-- 编辑抽屉 -->
    <el-drawer
      :title="title"
      :visible.sync="editDrawer"
      :direction="direction"
      :before-close="handleClose"
      size="1000px"
    >
      <div class="register_frame">
        <el-form :label-position="labelPosition" label-width="90px" :model="editList">
          <h2>司机个人信息</h2>
          <el-form-item v-if="infoShow" label="手机号">
            <el-input v-model="editList.phoneNumber" :disabled="true" />
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="editList.driverPwd" type="password" :disabled="infoShow" />
          </el-form-item>
          <el-form-item v-if="infoShow" label="姓名">
            <el-input v-model="editList.driverName" :disabled="true" />
          </el-form-item>
          <el-form-item v-if="infoShow" label="性别">
            <el-input v-model="editList.driverSex" :disabled="true" />
          </el-form-item>
          <el-form-item v-if="infoShow" label="身份证号">
            <el-input v-model="editList.driverCard" :disabled="true" />
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="editList.driverMailbox" :disabled="infoShow" />
          </el-form-item>
          <el-form-item v-if="infoShow" label="行驶证号">
            <el-input v-model="editList.drivinglicenseNum" :disabled="true" />
          </el-form-item>
          <el-form-item v-if="infoShow" label="驾驶证号">
            <el-input v-model="editList.drivingNum" :disabled="true" />
          </el-form-item>
          <el-form-item v-if="infoShow" label="身份证图片">
            <el-image
              style="width: 192px; height: 108px"
              :src="editList.cardImg"
              :preview-src-list="idsrcList"
            />
          </el-form-item>
          <el-form-item v-if="infoShow" label="行驶证图片">
            <el-image
              style="width: 192px; height: 108px"
              :src="editList.drivinglicenseImg"
              :preview-src-list="drivingLicenceSrcList"
            />
          </el-form-item>
          <el-form-item v-if="infoShow" label="驾驶证图片">
            <el-image
              style="width: 192px; height: 108px"
              :src="editList.drivingImg"
              :preview-src-list="drivingSrcList"
            />
          </el-form-item>
          <h2>司机车辆信息</h2>
          <el-form-item label="车辆颜色">
            <el-input v-model="editList.Colour" :disabled="infoShow" />
          </el-form-item>
          <el-form-item label="品牌">
            <el-input v-model="editList.brand" :disabled="infoShow" />
          </el-form-item>
          <el-form-item label="负荷人数">
            <el-input v-model="editList.loadNum" :disabled="infoShow" />
          </el-form-item>
          <el-form-item label="车牌号">
            <el-input v-model="editList.plateNumber" :disabled="infoShow" />
          </el-form-item>
          <el-form-item label="服务类型">
            <el-input v-model="editList.serviceType" :disabled="infoShow" />
          </el-form-item>
          <div v-if="infoShow === false" class="editBtn">
            <div><el-button size="medium" type="primary" icon="el-icon-success" @click="SubmitEdit">提交编辑</el-button></div>
          </div>
        </el-form>
      </div>
    </el-drawer>
    <!-- 订单抽屉 -->
    <el-drawer
      title="司机订单信息"
      :visible.sync="indentDrawer"
      :direction="direction"
      :before-close="handleClose"
      size="1200px"
    >
      <div class="indent_frame">
        <el-table :data="orderList" border stripe>
          <!-- 第一列  索引列-->
          <el-table-column type="index" />
          <!-- 第二列 -->
          <el-table-column prop="ordernum" label="订单号" />
          <!-- 第s三列 -->
          <el-table-column prop="phoneNum" label="乘客姓名" />
          <!-- 第四列 -->
          <el-table-column prop="province" label="省" />
          <!-- 第五列 -->
          <el-table-column prop="city" label="市" />
          <!-- 第六列 -->
          <el-table-column prop="origin" label="出发地" />
          <!-- 第七列 -->
          <el-table-column prop="bourn" label="目的地" />
          <!-- 第八列 -->
          <el-table-column prop="price" label="订单费用" />
          <!-- 第九列 -->
          <el-table-column prop="starttime" label="出发时间" />
          <!-- 第十列 -->
          <el-table-column prop="endtime" label="结束时间" />
          <!-- 第十一列 -->
          <el-table-column prop="ordertime" label="订单创建时间" />
          <!-- 第十二列 -->
          <el-table-column label="操作" width="120">
            <!-- 作用域 插槽 -->
            <template slot-scope="scope">
              <el-button size="mini" type="warning" icon="el-icon-s-grid" @click="evaluate(scope.row.orderId)">查看评价</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="removes">
          <el-pagination
            :current-page="orderPagenum"
            :page-sizes="[3, 6, 9]"
            :page-size="orderPagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="orderTotal"
            @size-change="orderSizeChange"
            @current-change="orderCurrentChange"
          />
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getDriver } from '@/api/driver'
import { getaudit } from '@/api/driver'
import { getDeleteDriver } from '@/api/driver'
import { getLockDriver } from '@/api/driver'
import { geteditDriver } from '@/api/driver'
import { getDriverIndent } from '@/api/driver'
import { getRemoved } from '@/api/driver'
import { searchdriver } from '@/api/driver'

export default {
  name: 'Driver',
  data() {
    return {
      driverList: [], // 司机列表
      auditInto: [], // 审核信息
      orderList: [], // 司机订单信息
      visible: false, // 审核不通过信息框显示
      multipleSelection: [], // 多选列表
      input: '', // 审核不通过信息框输入框
      searchdriver: '', // 搜索框信息
      querInfo: {
        // 当前页码
        pagenum: 1,
        // 每页显示条数
        pagesize: 3
      },
      // 司机总数
      total: 0,
      drawer: false, // 审核抽屉打开状态
      editDrawer: false, // 编辑抽屉打开状态
      indentDrawer: false, // 订单抽屉打开状态
      direction: 'rtl', // 打开方向
      //  驾驶证图片
      idsrcList: [],
      //  行驶证证图片
      drivingLicenceSrcList: [],
      //  驾驶证图片
      drivingSrcList: [],
      //  编辑司机的信息
      editList: [],
      //  表单域标签的位置
      labelPosition: 'left',
      // 信息显示判断
      infoShow: false,
      // 抽屉标题
      title: '',
      // 订单当前页码
      orderPagenum: 1,
      // 订单每页显示条数
      orderPagesize: 3,
      // 订单总数
      orderTotal: 0,
      // 订单的司机id
      driverOrderId: ''
    }
  },
  created() {
    this.getDriverList()
  },
  methods: {
    // 获取司机信息列表
    async getDriverList() {
      const result = await getDriver(this.querInfo)
      if (result.code !== 200) return this.$message.error('获取司机列表失败')
      this.driverList = result.data
      this.total = result.total
    },
    // 选择显示的数量
    handleSizeChange(newSize) {
      this.querInfo.pagesize = newSize
      this.getDriverList()
    },
    // 显示第几页的数据
    handleCurrentChange(num) {
      this.querInfo.pagenum = num
      this.getDriverList()
    },
    // 订单选择显示的数量
    orderSizeChange(newSize) {
      this.orderPagesize = newSize
      this.driverOrder()
    },
    // 订单显示第几页的数据
    orderCurrentChange(num) {
      this.orderPagenum = num
      this.driverOrder()
    },
    // 待审核
    ToAudit(d) {
      console.log(d, 90)
      this.auditInto = d
      this.idsrcList = [this.auditInto.cardImg]
      this.drivingLicenceSrcList = [this.auditInto.drivinglicenseImg]
      this.drivingSrcList = [this.auditInto.drivingImg]
      this.drawer = true
    },
    // 点击遮罩区关闭抽屉
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    // 审核通过与不通过
    async Pass(phoneNumber, auditState, auditRemark) {
      const phone = /^.{0,10}$/
      const result = phone.test(auditRemark)
      if (result) {
        const itemlist = { phoneNumber, auditState, auditRemark }
        const res = await getaudit(itemlist)
        console.log(phoneNumber, 209)
        if (res.code !== 200) return this.$message.error('审核失败')
        if (res.code === 200) {
          if (auditState === 11) {
            this.$message({ message: '审核通过', type: 'success' })
            this.drawer = false
            this.input = ''
          } else {
            this.$message.error('审核不通过')
            // 审核不通过信息框关闭
            this.visible = false
            // 抽屉打开状态
            this.drawer = false
          }
          // this.driverList = []
          this.getDriverList()
        }
      } else {
        this.$message.error('备注不能超过10个字')
        this.input = ''
      }
    },
    // 删除司机
    removedriver(Id) {
      this.$confirm('此操作将删除该司机, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        getDeleteDriver(Id).then(result => {
          if (result.code === 200) {
            this.getDriverList()
            this.$message({ message: '删除成功', type: 'success' })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 锁定司机
    async lockDriver(Id, state) {
      const driverId = Id
      const lockState = state
      const res = await getLockDriver({ driverId, lockState })
      if (res.code === 200) {
        this.getDriverList()
      }
    },
    // 编辑
    showRedact(item) {
      console.log(item)
      this.title = '编辑司机信息'
      this.editList = Object.assign({}, item) // 深拷贝
      this.editDrawer = true
      this.idsrcList = [this.editList.cardImg]
      this.drivingLicenceSrcList = [this.editList.drivinglicenseImg]
      this.drivingSrcList = [this.editList.drivingImg]
      this.infoShow = false
    },
    // 提交编辑信息
    SubmitEdit() {
      console.log(this.editList)
      // 司机电话号
      const phoneNumber = this.editList.phoneNumber
      // 密码
      const driverPwd = this.editList.driverPwd
      // 邮箱
      const driverMailbox = this.editList.driverMailbox
      // 服务类型
      const serviceType = this.editList.serviceType
      // 车辆id
      const carId = this.editList.carId
      // 车辆颜色
      const Colour = this.editList.Colour
      // 车辆品牌
      const brand = this.editList.brand
      // 车辆负荷数
      const loadNum = this.editList.loadNum
      // 车牌
      const plateNumber = this.editList.plateNumber
      console.log(phoneNumber, driverPwd, driverMailbox, serviceType, carId, Colour, brand, loadNum, plateNumber)
      this.$confirm('此操作将编辑司机信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const res = geteditDriver({ phoneNumber, driverPwd, driverMailbox, serviceType, carId, Colour, brand, loadNum, plateNumber })
        console.log(res, 428)
        this.$message({ message: '编辑成功', type: 'success' })
        this.getDriverList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消编辑'
        })
      })
    },
    // 打开司机订单抽屉
    orderForm(id) {
      console.log(id, 422)
      this.driverOrderId = id
      this.indentDrawer = true
      this.driverOrder()
    },
    async driverOrder() {
      // 当前司机ID
      const driverOrderId = this.driverOrderId
      // 当前页码
      const pagenum = this.orderPagenum
      // 每页显示条数
      const pagesize = this.orderPagesize
      const res = await getDriverIndent({ pagenum, pagesize, driverOrderId })
      console.log(res.data)
      this.orderList = res.data
      this.orderTotal = res.total
    },
    // 订单评价
    evaluate(id) {
      console.log(id, 516)
    },
    // 查看司机信息
    checkDriver(item) {
      this.title = '查看司机信息'
      this.editList = Object.assign({}, item) // 深拷贝
      this.editDrawer = true
      this.idsrcList = [this.editList.cardImg]
      this.drivingLicenceSrcList = [this.editList.drivinglicenseImg]
      this.drivingSrcList = [this.editList.drivingImg]
      this.infoShow = true
    },
    // 复选框选择的内容
    handleSelectionChange(val) {
      this.multipleSelection = []
      val.forEach((item, index) => {
        this.multipleSelection.push(item.driverId)
      })
      console.log(this.multipleSelection)
    },
    // 批量删除
    async removes() {
      console.log(this.multipleSelection)
      const res = await getRemoved(this.multipleSelection)
      console.log(res)
      this.$message({ message: '批量删除成功', type: 'success' })
      this.getDriverList()
    },
    // 司机搜索
    async searchDriver() {
      var querInfo = Object.assign({}, this.querInfo)
      querInfo['search'] = this.searchdriver
      console.log(querInfo)
      const result = await searchdriver(querInfo)
      console.log(result, 500)
      if (result.code !== 200) return this.$message.error('获取角色列表失败')
      this.driverList = result.data
      this.total = result.total
      console.log(this.driverList)
    },
    // 返回首页
    homePage() {
      this.getDriverList()
    }
  }
}
</script>

<style lang="scss">
.el-card {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.15) !important;
}
.el-table {
  margin-top: 15px;
  font-size: 12px;
}
.el-pagination {
  margin-top: 15px;
}
// 抽屉样式
.register_frame {
  width: 90%;
  height: 750px;
  border: 1px solid orange;
  margin: 0 auto;
  padding-top: 20px;
  padding-right: 20%;
  padding-left: 15%;
  padding-bottom: 30px;
  border-radius: 20px;
  background-color: white;
  overflow:auto;
  .register_frame div{
    margin-bottom: 30px;
    .imgSize {
      width: 192px;
      height: 108px;
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
    }
  }
}
// 订单抽屉
.indent_frame{
  width: 90%;
  height: 720px;
  margin: 0 auto;
  border-radius: 20px;
  overflow:auto;
}
.auditBtn{
  width: 45%;
  margin-top: 50px;
  display: flex;
  Justify-content: space-between;
}
.editBtn{
  width: 40%;
  margin: 0 auto;
}
// 批量删除
.removes{
  width: 100%;
  margin-top: 10px;
  display: flex;
  Justify-content: space-between;
}
.search{
  width: 100%;
  display: flex;
  margin-top: 20px;
  margin-bottom: 20px;
  Justify-content: flex-end;
  padding-right: 25px;
  .searchReturn{
    margin-left:30px
  }
  .search2{
    margin-right:10px
  }
}
</style>
